<!-- 设备状况 -->

<template>
	<view :class="['page', { iphoneX: isIphoneX }]">
		<template v-if="token && isLogin">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>

			<template v-else>
				<view class="body">
					<view class="tool-area">
						<view class="change-btn" @click="flag.isFullPage = true">
							<view class="select-data">{{ device_info.name }}</view>
							<view class="iconfont f-s20">&#xe623;</view>
						</view>

						<view class="ec-chart-area">
							<template v-if="listLoadingState.default">
								<loading :loadingState="listLoadingState"></loading>
							</template>
							<template v-else>
								<template v-if="device_info.list.length > 0">
									<uni-ec-canvas
										class="uni-ec-canvas"
										id="data-chart"
										ref="canvas"
										canvas-id="lazy-load-chart"
										:ec="ec"
										:force-use-old-canvas="true"
									></uni-ec-canvas>
								</template>
								<template v-else>
									<empty msg="暂无数据"></empty>
								</template>
							</template>
						</view>
					</view>
					<view class="hd-title-bar">
						<view class="title">设备状况明细</view>
						<!-- <picker mode="selector" :range="tool_data" >
						<view class="change-btn">
							<view class="select-data">正常</view>
							<view class="iconfont f-s24">&#xe623;</view>
						</view>
					</picker> -->
					</view>
					<view class="tool-list">
						<template v-if="listLoadingState.default">
							<loading :loadingState="listLoadingState"></loading>
						</template>
						<template v-else>
							<template v-if="device_info.list.length > 0">
								<view class="item" v-for="(item, index) in device_info.list" :key="index">
									<view class="title">{{ item.name }}</view>
									<view class="status">
										状态：
										<template v-if="item.intervalDate == 0">
											<text>正常</text>
										</template>
										<template v-else>
											<text class="f-red">不正常 {{ item.intervalDate }}天</text>
										</template>
									</view>
									<view class="time">上传时间：{{ item.addtime }}</view>
								</view>
							</template>
							<template v-else>
								<empty msg="暂无数据"></empty>
							</template>
						</template>
					</view>
				</view>
				<!-- <view class="footer">
				<view class="fix-wrap bottom">
					<view class="submit-btn">我要报修</view>
				</view>
			</view> -->
			</template>
		</template>
		<view v-if="flag.isFullPage" class="full-fix-page">
			<view class="picker-bottom-wrap">
				<view class="hd">
					<view class="cancle" @click="flag.isFullPage = false">取消</view>
					<view class="confirm" @click="comfirmType">确定</view>
				</view>
				<picker-view indicator-class="indicatorClass" class="picker-view-wrap row-2" :value="changeType" @change="changeDevType">
					<picker-view-column class="item-column">
						<view v-if="(item.has_dev && item.has_dev.length > 0) || item.count > 0" class="item" v-for="(item, index) in device.list" :key="index">
							{{ item.name }}
						</view>
					</picker-view-column>
					<picker-view-column class="item-column">
						<view class="item" v-for="(item, index) in device.child" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
import uniEcCanvas from '@/components/uni-ec-canvas.vue';
import loading from '@/components/loading-more.vue';
import empty from '@/components/empty.vue';
import * as echarts from '@/common/echart/echarts.js';
let chart = null;
export default {
	name: 'name',
	data() {
		return {
			isIphoneX: getApp().globalData.isIphoneX,
			token: uni.getStorageSync('token'),
			appid: getApp().globalData.appid,
			userInfo: uni.getStorageSync('userInfo'),
			isLogin: false,
			isEmpty: false,
			device: {},
			loadingState: {
				default: true,
				loading: false,
				completed: false,
				step: 0
			},
			listLoadingState: {
				default: true,
				loading: false,
				completed: false
			},
			device_info: {
				type: '',
				name: '',
				typeid: '',
				list: [],
				sub: []
			},
			changeType: [0, 0],
			flag: {
				isFullPage: false
			},
			ec: {
				lazyLoad: true
			},
			params: {
				page: 1,
				limit: 20
			},
			canvs_option: {}
		};
	},
	async onLoad(params) {
		if (this.token) {
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.device.list = await this.getDeviceType();
				if (this.device.list[this.changeType[0]].has_dev && this.device.list[this.changeType[0]].has_dev.length > 0) {
					this.device.child = this.device.list[this.changeType[0]].has_dev;
					this.device_info.name = this.device.child[0].name;
					this.device_info.type = this.device.child[0].number;
				}
				this.getDevStatus();
			} else {
				this.isLogin = await this.$loginState('reset');
			}
		}
	},
	async onShow() {
		// 登录状态更新 重新获取token 等值
		if (this.loginStateUpdate) {
			this.token = uni.getStorageSync('token');
			this.userInfo = uni.getStorageSync('userInfo');
			this.isLogin = true;
			this.device.list = await this.getDeviceType();
			if (this.device.list[this.changeType[0]].has_dev && this.device.list[this.changeType[0]].has_dev.length > 0) {
				this.device.child = this.device.list[this.changeType[0]].has_dev;
				this.device_info.name = this.device.child[0].name;
				this.device_info.type = this.device.child[0].number;
			}
			this.getDevStatus();
			this.loginStateUpdate = false;
		}

		if (!this.token && !this.isLogin) {
			this.isLogin = await this.$loginState('reset');
		}
	},
	methods: {
		initChart(canvas, width, height, canvasDpr) {
			chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: canvasDpr
			});
			canvas.setChart(chart);
			chart.setOption(this.canvs_option);
			return chart;
		},

		echartOption: function() {
			let option = {
				title: {
					text: ''
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b} : {c} ({d}%)'
				},
				series: [
					{
						name: '访问来源',
						type: 'pie',
						radius: '80%',
						itemStyle: {
							normal: {
								label: {
									show: true,
									formatter: '{b} {c} 台'
								},
								labelLine: {
									show: true
								}
							}
						},
						data: [
							{
								value: 235,
								name: '正常'
							},
							{
								value: 274,
								name: '故障'
							}
						]
					}
				]
			};
			return option;
		},

		// 获取设备类型
		getDeviceType: async function() {
			this.loadingState.default = true;
			let res = await this.$api.tool_api.getDevTypeCount({
				appid: this.appid,
				token: this.token,
				user_id: this.userInfo.uid
			});

			if (res.data.ret == 1000) {
				let data = [];
				this.loadingState.default = false;
				res.data.data.forEach(item => {
					if (item.child.length > 0) {
						let has_dev = [];
						item.child.forEach(subitem => {
							if (subitem.count > 0) {
								has_dev.push(subitem);
								item.has_dev = has_dev;
							}
						});
					}
					if ((item.has_dev && item.has_dev.length > 0) || item.count > 0) {
						data.push(item);
					}
				});
				return data;
			}
		},

		// 切换设备类型
		changeDevType: function(e) {
			if (this.changeType[0] != e.detail.value[0]) {
				this.changeType = [e.detail.value[0], 0];
			} else {
				this.changeType = e.detail.value;
			}
			if (this.device.list[this.changeType[0]].child.length > 0) {
				this.device.child = this.device.list[this.changeType[0]].has_dev;
			} else {
				this.device.child = [];
			}
		},

		// 确定设备类型
		comfirmType: function() {
			if (this.device.list[this.changeType[0]].has_dev && this.device.list[this.changeType[0]].has_dev.length > 0) {
				this.device_info.type = this.device.list[this.changeType[0]].has_dev[this.changeType[1]].number;
				this.device_info.typeid = this.device.list[this.changeType[0]].has_dev[this.changeType[1]].id;
				this.device_info.name = this.device.list[this.changeType[0]].has_dev[this.changeType[1]].name;
			} else {
				this.device_info.type = this.device.list[this.changeType[0]].number;
				this.device_info.typeid = this.device.list[this.changeType[0]].number;
				this.device_info.name = this.device.list[this.changeType[0]].name;
			}

			this.getDevStatus();
			this.flag.isFullPage = false;
		},

		getDevStatus: async function() {
			let res = await this.$api.tool_api.getDevStatus({
				appid: this.appid,
				token: this.token,
				user_id: this.userInfo.uid,
				type: this.device_info.type,
				page: 1,
				limit: 'all'
			});
			if (res.data.ret == 1000) {
				this.listLoadingState.default = false;
				if (res.data.data) {
					if (this.device_info.type == 2 || this.device_info.type == 19) {
						this.device_info.list = res.data.data.weather; //  2测报灯 或 19黄板 特殊处理
					} else {
						this.device_info.list = res.data.data;
					}
					let echart_option = [
							{
								value: '',
								name: '正常'
							},
							{
								value: '',
								name: '异常'
							}
						],
						list_1 = [], // 异常
						list_2 = []; // 正常
					this.device_info.list.forEach(item => {
						if (item.intervalDate == 0) {
							list_2.push(item);
						} else {
							list_1.push(item);
						}
					});

					echart_option[0].value = list_2.length;
					echart_option[0].name = '正常';
					echart_option[1].value = list_1.length;
					echart_option[1].name = '异常';

					this.canvs_option = {
						title: {
							text: ''
						},
						tooltip: {
							trigger: 'item',
							formatter: '{b} : {c} ({d}%)'
						},
						series: [
							{
								name: '访问来源',
								type: 'pie',
								radius: '75%',
								itemStyle: {
									normal: {
										label: {
											show: true,
											formatter: '{b} {c} 台'
										},
										labelLine: {
											show: true
										}
									}
								},
								data: echart_option
							}
						]
					};

					setTimeout(() => {
						this.$refs.canvas.init(this.initChart);
					}, 300);
				} else {
					this.device_info.list = [];
				}
			}
		}
	},
	components: {
		uniEcCanvas,
		loading,
		empty
	},
	computed: {},
	watch: {}
};
</script>

<style lang="less">
.tool-area {
	background: #ffffff;
}

.loading {
	margin: 30rpx 0;
}

.ec-chart-area {
	padding: 50rpx 20rpx;
	height: 400rpx;
	background: #fff;
}

.hd-title-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx 0 0;
	margin: 20rpx 0;

	.title {
		border-left: 8rpx solid #09f;
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
}

.tool-list {
	.item {
		margin-bottom: 20rpx;
		padding: 20rpx;
		background: #fff;

		.title {
			margin-bottom: 10rpx;
			font-size: 30rpx;
		}

		.status {
			margin-bottom: 10rpx;
			font-size: 26rpx;
		}

		.time {
			color: #999;
			font-size: 26rpx;
		}
	}
}

.submit-btn {
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background: #0085ff;
	color: #fff;
	font-size: 30rpx;
}
</style>
